<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view style="background-color: white;padding: 20rpx;">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth='80'>
				<u-form-item label="姓名" prop="username" borderBottom>
					<u--input v-model="model.username" border="none" placeholder="姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom>
					<u--input v-model="model.mobile" border="none" placeholder="'手机号'" type="number"></u--input>
				</u-form-item>
				<u-form-item label="省/市/区" prop="address" borderBottom>
					<yhdslplace @change="change">
						<view class="place" :style="model.address ? 'color: black;' : 'color: grey;'">
							{{ model.address ? model.address : '省/市/区' }}
						</view>
					</yhdslplace>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail">
					<u--textarea v-model="model.detail" border="none" placeholder="详细地址"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view
			style="margin: 30rpx 0;background-color: white;font-size: 32rpx;display: flex;justify-content: space-between;align-items: center;padding:30rpx 20rpx;">
			<view>
				设为默认地址
			</view>
			<u-switch v-model="model.is_default" size="20" activeColor="#75D65E"></u-switch>
		</view>
		<view class="btn-box">
			<view class="btn" @click="submit">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import yhdslplace from '@/components/yhdsl-place/yhdsl-place.vue';
	import {
		update,
		changeAddressDefault
	} from "@/request/api/address.js"
	export default {
		components: {
			yhdslplace
		},

		data() {
			return {
				statusBarHeight: 0,
				model: {
					mobile: '',
					username: '',
					address: '',
					is_default: false,
					detail: '',
				},
				rules: {
					'username': {
						required: true,
						message: '姓名',
						trigger: ['blur', 'change']
					},
					'mobile': {
						required: true,
						message: "手机号",
						trigger: ['blur', 'change']
					},
					'detail': {
						required: true,
						message: "详细地址",
						trigger: ['blur', 'change']
					},
					'address': {
						required: true,
						message: '省/市/区',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(info) {
					that.statusBarHeight = info.statusBarHeight;
				}
			})
		},
		onLoad(opt) {
			let json = JSON.parse(opt.item);
			json['address'] = `${json.province}/${json.city}/${json.area}`
			json.is_default = json.is_default == 1 ? true : false;
			this.model = json;
		},
		methods: {
			goHome() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			back() {
				uni.navigateBack()
			},
			change(val) {
				this.model.address = val.data.join('/');
			},
			submit() {
				this.$refs.uForm.validate().then(async () => {
					let json = JSON.parse(JSON.stringify(this.model))
					json.is_default = json.is_default ? 1 : 0;
					// if (json.is_default) {
					// 	await changeAddressDefault({
					// 		id: json.id
					// 	})
					// }
					json['province'] = json.address.split('/')[0]
					json['city'] = json.address.split('/')[1]
					json['area'] = json.address.split('/')[2]
					delete json.address;
					let res = await update(json);
					if (res.code == 1) {
						uni.navigateBack()
					}
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		},
	};
</script>
<style>
	page {
		background-color: rgb(246, 246, 246);
	}
</style>
<style scoped lang="scss">
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		.btn {
			margin: 30rpx;
			margin-top: 100rpx;
			background: linear-gradient(to right, #75D65E, #75D65E);
			color: white;
			border-radius: 50px;
			text-align: center;
			padding: 24rpx 0;
			font-size: 32rpx;
		}
	}
</style>